<template>
    <div class="tab-content">
        <el-form ref="batteryFormRef" :model="batteryForm" :rules="batteryRules" label-width="150px" class="config-form">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="运力车辆总数" prop="totalVehicles">
                        <el-input v-model="batteryForm.totalVehicles" placeholder="请输入运力车辆总数">
                            <template #append>辆</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="运力站点总数" prop="totalStations">
                        <el-input v-model="batteryForm.totalStations" placeholder="请输入运力站点总数">
                            <template #append>个</template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="订单总数" prop="totalOrders">
                        <el-input v-model="batteryForm.totalOrders" placeholder="请输入订单总数">
                            <template #append>单</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="运行总里程" prop="totalMileage">
                        <el-input v-model="batteryForm.totalMileage" placeholder="请输入运行总里程">
                            <template #append>公里</template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div class="save-button-container">
            <el-button type="primary" @click="saveBatteryData">保存共享运力数据配置</el-button>
        </div>
    </div>
</template>
<script lang="ts" setup>
    import { ref, reactive } from 'vue'
    import { updateDataClassify } from '@/api/port'
    import { ElMessage } from 'element-plus'

    // 模块3: 共享运力数据配置表单
    const batteryRules = {
        totalVehicles: [{ required: true, message: '运力车辆总数不能为空', trigger: 'blur' }],
        totalStations: [{ required: true, message: '运力站点总数不能为空', trigger: 'blur' }],
        totalOrders: [{ required: true, message: '订单总数不能为空', trigger: 'blur' }],
        totalMileage: [{ required: true, message: '运行总里程不能为空', trigger: 'blur' }]
    }
    const batteryForm = ref({
        totalVehicles: 0, // 运力车辆总数
        totalStations: 0, // 运力站点总数
        totalOrders: 0, // 订单总数
        totalMileage: 0 // 运行总里程
    })
    const batteryFormRef = ref()
    const saveBatteryData = async () => {
        if (!batteryFormRef.value) return
        
        try {
            await batteryFormRef.value.validate()
            await updateDataClassify({
                id: 5,
                key: 'module3',
                value: batteryForm.value
            })
            console.log('保存共享运力数据:', batteryForm.value)
            ElMessage.success('共享运力数据保存成功')
        } catch (error) {
            ElMessage.warning('请填写完整的表单信息')
        }
    }
    
    // 初始化函数
    const init = (module: any) => {
        console.log(module)
        if(module){
            batteryForm.value = module
        }else{
            batteryForm.value = {
                totalVehicles: 0, // 运力车辆总数
                totalStations: 0, // 运力站点总数
                totalOrders: 0, // 订单总数
                totalMileage: 0 // 运行总里程
            }
        }
    }
    // 暴露方法给父组件
    defineExpose({
        init
    })
</script>
<style lang="less" scoped>

</style>